import React, { PureComponent } from 'react'

import { createMap } from './utils';

import styled from 'styled-components';
import { Row, Col, Input, Button } from 'antd';

const { Search } = Input;

interface P {
  name?: string;
  location?: Array<string>;
  setPoint: Function
}

const List = styled.section`
  border: 1px solid #AEC7D9;
  overflow-y: auto;
  padding: 10px;
`

const ListC = styled.div`
  margin-bottom: 5px;
  p {
    margin-bottom: 2px;
    font-size: 12px;
  }
  h4 {
    font-size: 14px;
    button {
      margin: 10px 0 0 0;
      padding: 0;
      text-decoration: underline;
    }
  }
`

const Container = styled.section`
  width: 100%;
  height: 600px;
`

class MapSelet extends PureComponent<P> {

  map = null;

  state = {
    location: this.props.location || [],
    list: []
  }

  componentDidMount() {
    const location = this.state.location || [117.187528, 39.121387];

    this.map = createMap({
      container: "Map",
      enableMapClick: false,
      location,
      level: 20,
      overviewMapControl: true,
      enableScrollWheelZoom: true,
      disable3DBuilding: true
    })

    if (this.props.name) {
      this.search(this.props.name)
    }

    if (this.map && Array.isArray(this.state.location) && this.state.location.length > 0) {
      this.map.clearOverlays();
      const point = new window.BMap.Point(...this.state.location)
      let marker = new window.BMap.Marker(point);
      this.map.addOverlay(marker);
      this.map.centerAndZoom(point, 15);
      this.setState({
        location: this.state.location
      }, () => this.props.setPoint(location));
    }

    this.map && this.map.addEventListener('click', e => {
      this.map.clearOverlays();
      const point = new window.BMap.Point(e.point.lng, e.point.lat)
      let marker = new window.BMap.Marker(point);
      this.map.addOverlay(marker);
      this.map.centerAndZoom(point, 15);
      this.setState({
        location: [e.point.lng, e.point.lat]
      }, () => this.props.setPoint([e.point.lng, e.point.lat]));
    });
  }

  search = (v) => {
    var options = {
      onSearchComplete: (results) => {
        if (local.getStatus() === 0) {
          const len = results.getCurrentNumPois();
          const ans = [];

          for (let i = 0; i < len; i++) {
            const tmp = results.getPoi(i);
            ans.push({
              name: tmp.title,
              address: tmp.address,
              point: tmp.point || {}
            })
          }

          this.setState({ list: ans })
        }
      }
    };
    const local = new window.BMap.LocalSearch(this.map, options)

    local.search(v)
  }

  handlePoint(v) {
    this.map.clearOverlays();
    const point = new window.BMap.Point(v.point.lng, v.point.lat)
    let marker = new window.BMap.Marker(point);
    this.map.addOverlay(marker);
    this.map.centerAndZoom(point, 15);
    this.setState({
      location: [v.point.lng, v.point.lat]
    }, () => this.props.setPoint([v.point.lng, v.point.lat]));
  }

  render() {

    const { location, list } = this.state;

    return (
      <Container>
        <Row style={{ width: "100%", height: "10%" }}>
          <Col span={14}>
            单位名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <Search placeholder="请输入单位名称" defaultValue={this.props.name} onSearch={this.search} style={{ width: 200 }} />
          </Col>
          <Col span={10}>
            <span
              style={{
                display: 'inline-block', width: '80px',
                height: '30px', lineHeight: '30px',
                textAlign: 'center', verticalAlign: 'text-bottom',
              }}
            >当前坐标</span> <span
              style={{
                display: 'inline-block', borderRadius: '3px',
                border: '1px solid #ccc', background: '#f0f0f0', 
                width: '200px', height: '30px', lineHeight: '30px',
                textIndent: '14px', verticalAlign: 'text-bottom',
              }}
            >
              {Array.isArray(location) && location.join(', ')}
            </span>
          </Col>
        </Row>
        <Row style={{ width: "100%", height: "90%" }}>
          <Col span={17} style={{ height: "100%" }}>
            <div id="Map" style={{ width: "100%", height: "100%" }} />
          </Col>
          <Col span={7} style={{ height: "100%" }}>
            <List style={{ width: "100", height: "100%" }}>
              {
                Array.isArray(list) && list.map((v, index) => (
                  <ListC key={index} onClick={() => this.handlePoint(v)}>
                    <h4><Button type="link">{v.name}</Button></h4>
                    <p>地址：{v.address}</p>
                    <p>坐标：{v.point.lng}, {v.point.lat}</p>
                  </ListC>
                ))
              }
            </List>
          </Col>
        </Row>
      </Container>
    )
  }
}


export default MapSelet;